html,body{height:100%;overflow:hidden;}
/* 顶部栏格式 */
#top{
    /* 外边距为1% */
    margin-top: 1%; 
    width: 100%;
    height: 8%;
}
/* 顶部栏的左侧logo图标 */
#topleft{
    width: 50%;
    height: 100%;
    /* 向左浮动，消除块级独占一行的情况 */
    float: left;
}
/* 图标高度铺满 */
#topleft>img{
    height: 100%;
}
/* 顶部栏右侧导航栏 */
#topright{
    width: 49%;
    height: 100%;
    /* topright向右浮动 */
    float: right;
}
/* 列表格式 */
#topul{ 
    position: relative;
    top: 28%;
    margin:0;
    padding:0;
    float: right;
    background-color: whitesmoke;
    border: 1px solid yellow;
}
/* 列表内信息 */
#topright li{
    /* 无标志 */
    list-style-type: none;
    width: 100px;
    /* 居中排列 */
    text-align: center;
    /* li水平方向显示*/
    float: left; 
    line-height: 40px; 
}
/* 顶部栏右侧促销标签 */
#topimg{
    position: relative;
    left: 48%;
    top: 15%;
    margin-left: 1%;
    margin-bottom: -3%;
    /* z轴属性定义上下层次，在ul上方 */
    z-index: 2;
}
/* 导航栏 */
#navigation{
    position: relative;
    top: 1%;
    width: 100%;
    height: 4%;
    /* 背景图片 */
    background-image: url("img/menuBg.jpg");
    /* 铺满 */
    background-size: cover;
}
/* 导航栏ul列表 */
#naul{
    position: relative;
    right: 3%;
    margin:0;
    padding:0;
    float: right;
}
/* 导航栏列表格式 */
#navigation li{
    list-style-type: none;
    float: left;
    width: 85px;
    text-align: center;
    line-height: 35px;
}
/* 宣传图片格式 */
#banner{
    margin-top: 1%;
    width: 100%;
    height: 15%;
    /* 背景图片，不重复 */
    background: url("img/banner.png") no-repeat;
    /* 背景大小100%，平铺满 */
    background-size: 100% 100%;
}
/* 中心div格式 */
#center{
    margin-top: 1%;
    margin-left: 1%;
    width: 100%;
    height: 60%;
    border: 1px solid yellow;
}
/* 图书畅销榜图标 */
#centerbg{
    position: relative;
    margin-top: 2%;
    /* 向左挪动 */
    margin-left: -1%;
    /* 层次高，在上层 */
    z-index: 5;
}
/* 图书div格式 */
#books{
    width: 100%;
    height: 80%;
}
/* 第一本图书格式 */
#book1{
    width: 50%;
    height: 80%;
}
/* 第一本图书的排行标记 */
#bookNo1>img{
    position: relative;
    /* 在book1_1>img之上 */
    z-index: 3;
    margin-left: 3%;
    margin-top: 3%; 
}
/* 第一本图书图标 */
#book1_1>img{
    position: relative;
    z-index: 1;
    margin-top: -4%;
}
/* 第一本图书信息 */
#book1_info{
    width: 40%;
    margin-left: 35%;
    margin-top: -35%;
}
/* 每本图书的书名颜色为天蓝色 */
#book1_title, #book2_title, #book3_title{
    color: skyblue;
}
/* 第二本图书格式 */
#book2{
    margin-left: 50%;
    margin-top: -25%;
}
/* 第二本图书的排行标记 */
#bookNo2>img{
    position: relative;
    /* 层次在book_2>img之上 */
    z-index: 2;
    margin-left: 3%;
    margin-top: 9%;
}
/* 第二本图书的图标 */
#book_2>img{
    position: relative;
    z-index: 1;
    margin-top: -3%;
    width: 25%;
    height: 20%;;
}
/* 第二本图书的信息 */
#book2_info{
    width: 40%;
    margin-left: 30%;
    margin-top: -25%;
}
/* 第三本书格式信息设置 */
#book3{
    margin-left: 50%;
}
/* 第三本书的标号3的图标 */
#bookNo3>img{
    position: relative;
    z-index: 2;
    margin-left: 4%;
    margin-top: 2%;
}
/* 第三本书的图标 */
#book3>img{
    position: relative;
    z-index: 1;
    margin-left: -95%;
    margin-top: -10%;
    width: 40%;
    height: 30%;
}
/* 第三本书的信息 */
#book3_info{
    width: 40%;
    margin-left: 30%;
    margin-top: -20%;
}

/* 底部信息格式设置 */
#foot{
    margin-top: 1%;
    text-align: center;
}

#foot_left{
    margin-left: 23%;
    text-align: left;
}

#validate{
    margin-top: -3.5%;
}

#foot_right{
    margin-top: -3.4%;
    margin-left: 31.5%;
}